import axios from "axios";
import React, { useEffect, useLayoutEffect, useInsertionEffect } from "react";



function App() {

    useEffect(() => {
        console.log('useEffect');

    }, [])

    // 在 useInsertionEffect 后面执行，useEffect 前执行
    useLayoutEffect(() => {
        console.log('useLayoutEffect');
        // useCss('#f66')
    }, [])

    useCss('#f66')



    // 自定义 hooks 函数
    function useCss(color) {
        // 因为该 hooks 会在 DOM 渲染前执行，所以这里可以注入 css 样式
        useInsertionEffect(() => {
            console.log('useInsertionEffect');
            document.getElementById('title').style.color = color
        }, [])
    }


    return <div>
        <h1 id="title">App</h1>

    </div>
}


export default App